<div class="ui-box">
    <div class="cover" i-dom="cover">
        <div class="slider">
            {{each pic}}
            <img src="{{$value}}?imageView2/2/w/600">
            {{/each}}
        </div>
    </div>
    <div class="intro">
        <h1>
            {{title}}
        </h1>
        {{if label.length>0}}
        <div class="tags">
            {{each label}}
            <span class="tag">{{$value}}</span>
            {{/each}}
        </div>
        {{/if}}
        <!--todo 倒计时还没做-->
        {{if time_kill}}
        <div class="tag-timer" data-time="{{time_kill}}">
            <span>{{time_kill | formatTime:'hh:mm:ss'}}</span>
        </div>
        {{/if}}
        <div class="stock">
            库存:{{stock}}件
        </div>
        <div class="ui-price price-red">{{price/10}}</div>
        {{if price_cost>0}}
        <div class="ui-price price-gray">{{price_cost/10}}</div>
        {{/if}}
    </div>
</div>

<div class="ui-box ui-v-a bar-44px">
    <i class="ic ic-certified"></i>
    <span>100%正品</span>

    <i class="ic ic_promise"></i>
    <span>售后保障</span>

    <div class="ui-more"></div>
</div>

<div class="ui-box">
    <div class="box-title ui-v-a">
        <i class="ic ic_params"></i>
        <span>商品参数</span>
    </div>
    <div class="box-params ui-c-f">
        {{if brand}}
        <div class="parama-title">品牌</div>
        <div class="parama-value">{{brand}}</div>
        {{/if}}

        {{if place}}
        <div class="parama-title">产地</div>
        <div class="parama-value">{{place}}</div>
        {{/if}}

        {{if supplier}}
        <div class="parama-title">供应商</div>
        <div class="parama-value">{{supplier}}</div>
        {{/if}}
    </div>
</div>

{{if description.length>0}}
<div class="ui-box">
    <div class="box-title ui-v-a">
        <i class="ic ic_detail"></i>
        <span>商品详情</span>
    </div>
    <div class="box-detail">
        {{each description}}

        {{if $value.key == 'text'}}
        <div class="paragraph">{{$value.value}}</div>
        {{/if}}

        {{if $value.key == 'pic'}}
        <img src="{{$value.value+'?imageView2/2/w/500'}}">
        {{/if}}

        {{/each}}
    </div>
</div>
{{/if}}

<div class="ui-page-holder"></div>

<div class="ui-cart" i-dom="cart" i-tap="goto_cart">
    <div class="ui-cart-num"></div>
</div>

<footer class="ui-c-f">
    <div class="ui-price price ui-v-a" i-dom="fp"><span>{{price/10}}</span></div>
    <button class="ui-btn-yellow ui-v-a" i-dom="fbutton" i-tap="clickfb"><span>加入购物车</span></button>
</footer>

{{if SpecsManager!=null}}
<div class="float-layer" i-dom="float">
    <div class="float-shade" i-dom="shade" i-tap="closeShade"></div>
    <div class="float-body" i-dom="body">

        <div class="productArea">
            <div i-dom="product">
                {{division "product"}}
                <div class="tumb-cover">
                    <img src="{{pic[0]}}?imageView2/1/w/200/h/200">
                </div>
                <div class="right-part">
                    <div class="tumb-top ui-c-f">
                        <div class="thum-price">
                            <div class="ui-price price-red">{{price/10}}</div>
                            {{if price_cost>0}}
                            <div class="ui-price price-gray">{{price_cost/10}}</div>
                            {{/if}}
                        </div>
                        <h1>
                            {{title}}
                        </h1>
                        {{if label.length>0}}
                        <div class="tags">
                            {{each label}}
                            <span class="tag">{{$value}}</span>
                            {{/each}}
                        </div>
                        {{/if}}
                        <div class="stock">
                            库存:{{stock}}件
                        </div>
                    </div>
                    <div class="ui-counter ui-c-f">
                        <div class="ui-decs ui-v-a" i-tap="changeNumber(-1)"></div>
                        <input type="tel" maxlength="2" class="ui-count-input" i-change="setCount" i-dom="count">

                        <div class="ui-add ui-v-a" i-tap="changeNumber(1)"></div>
                    </div>


                </div>
                {{/division}}
            </div>
        </div>
        <div class="categoryArea">
            <div i-tap="clearFilter" class="clearAll">清除所选</div>

            {{each SpecsManager.StrategyMap as ca}}
            <div>
                <div class="category-title">
                    {{ca.name}}
                </div>
                {{each ca.map}}
                <span class="category-tag" i-tap="clickColorTag({{ca._id}})" data-value="{{$index}}">{{$index}}</span>
                {{/each}}
                <div class="category-strategy">
                    {{division "StrategyArea"}}

                    <div class="category-subtitle"></div>
                    {{each map}}
                    <span class="category-tag" i-tap="clickTag" data-tag="{{key}}>{{$index}}">{{$value}}</span>
                    {{/each}}

                    {{/division}}
                </div>
            </div>
            {{/each}}

            {{each SpecsManager.SpecMap as ca}}
            <div>
                <div class="category-title">
                    {{ca.name}}
                </div>
                {{each ca.map}}
                <span class="category-tag" i-tap="clickTag" data-tag="{{ca._id}}>{{$index}}">{{$value}}</span>
                {{/each}}
            </div>
            {{/each}}
        </div>

        <div class="ui-page-holder"></div>
    </div>
</div>
{{/if}}
<style>
    .cover {
        width: 100%;
        overflow: hidden;
    }

    .slider {
        height: 100%;
    }

    .cover img {
        display: block;
        float: left;
    }

    .intro {
        padding: 8px;
    }

    h1 {
        font-size: 13px;
        font-weight: lighter;
        margin-right: 80px;
    }

    .tag:first-child {
        padding: 2px;
        font-size: 10px;
        color: white;
        background: #ffba00;
    }

    .tag {
        padding: 2px;
        font-size: 10px;
        color: #888888;
        background: #eeeeee;
    }

    .tag-timer {
        background: rgba(0, 0, 0, 0.7);
        color: white;
        display: inline-block;
        font-size: 10px;
        height: 16px;
        padding: 0 4px 0 2px;
    }

    .tag-timer::after {
        content: '';
        display: block;
    }

    .tag-timer::before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 100%;
        background: url(img/ic_clock.png) no-repeat center;
        background-size: contain;
        margin: 0 2px;
        vertical-align: middle;
    }

    .tag-timer > span {
        vertical-align: middle;
    }

    .stock {
        font-size: 10px;
        color: #888888;
    }

    .price-red {
        color: #ff0000;
        font-size: 14px;
        font-weight: normal;
        display: inline-block;
    }

    .price-gray {
        display: inline-block;
        color: #888888;
        text-decoration: line-through;
        font-size: 11px;
    }

    .bar-44px {
        padding: 0 8px;
        height: 44px;
    }

    .box-params {
        padding: 8px 16px;
        font-size: 12px;
    }

    .parama-title {
        float: left;
        width: 30%;
        color: #888888;
        font-weight: normal;
        padding: 4px 0;
    }

    .parama-value {
        float: left;
        width: 70%;
        padding: 4px 0;
    }

    .box-detail > div {
        font-size: 14px;
        line-height: 2em;
        padding: 8px;
        text-indent: 2em;
    }

    .box-detail > img {
        width: 100%;
    }

    .box-title {
        height: 36px;
        color: #888888;
        font-size: 13px;
        border-bottom: solid 1px #f0f0f0;
        margin: 0 8px;
    }

    .ic {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        display: inline-block;
        vertical-align: middle;
    }

    .ic-certified {
        width: 21px;
        height: 24px;
        background-image: url("img/ic_certified.png");
    }

    .ic_promise {
        width: 21px;
        height: 24px;
        background-image: url("img/ic_promise.png");
    }

    .ic_detail {
        width: 15px;
        height: 15px;
        background-image: url("img/ic_detail.png");
    }

    .ic_params {
        width: 15px;
        height: 15px;
        background-image: url("img/ic_params.png");
    }

    footer .ui-price {
        color: #f9e043;
        font-size: 13px;
        height: 100%;
        float: left;
        margin: 0 5px;
    }

    footer .ui-btn-yellow {
        float: right;
        padding: 0;
        height: 34px;
        margin: 5px;
    }

    .float-layer {
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
        position: fixed;
        z-index: 10;
        display: none;
    }

    .float-shade {
        width: 100%;
        height: 150%;
        bottom: 0;
        left: 0;
        position: fixed;
        z-index: 10;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        transition: opacity 0.3s;
        -webkit-transition: opacity 0.3s;
    }

    .float-body {
        bottom: -999px;
        position: fixed;
        z-index: 11;
        left: 0;
        width: 100%;
        background: #f0f0f0;
        transition: bottom 0.3s;
        -webkit-transition: bottom 0.3s;
    }

    .productArea {
        background: white;
    }

    .tumb-cover {
        margin: 8px;
        width: 100px;
        height: 100px;
        position: absolute;
    }

    .tumb-cover > img {
        width: 100%;
        height: 100%;
    }

    .tumb-top {
        height: 70px;
    }

    .thum-price {
        float: right;
        margin-right: 8px;
        text-align: right;
    }

    .thum-price > * {
        display: block !important;
    }

    .thum-bottom .stock {
        padding: 2px 0;
    }

    .right-part {
        padding: 8px 0;
        margin-left: 116px;
        height: 100px;
    }

    .ui-counter {
        position: absolute;
        right: 8px;
    }

    .clearAll {
        float: right;
        font-size: 12px;
    }

    .categoryArea {
        padding: 24px;

    }

    .category-title {
        font-size: 12px;
        color: #888888;
        border-bottom: solid 1px #dddddd;
        width: 120px;
        margin-bottom: 8px;
        margin-top: 16px;
    }

    .category-subtitle::before {
        content: '';
        display: block;
        position: absolute;
        width: 8px;
        height: 8px;
        background: url(img/ic_arrow_111up.png) #f0f0f0 no-repeat center;
        background-size: contain;
        opacity: 1;
        margin-top: -5px;
        margin-left: 8px;
    }

    .category-subtitle {
        font-size: 12px;
        color: #888888;
        border-bottom: solid 1px #aaaaaa;
        margin-right: 200px;
        margin-bottom: 4px;
    }

    .category-tag {
        padding: 8px;
        font-size: 12px;
        text-align: center;
        min-width: 16px;
        height: 16px;
        background: #dddddd;
        display: inline-block;
        margin-right: 8px;
        margin-bottom: 8px;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
    }

    .category-tag.un {
        color: #aaaaaa;
        background: #E8E8E8;
    }

    .category-tag.select {
        background: #111111;
        color: white;
    }

    .ui-btn-yellow.un {
        background: #dddddd;
        color: #888888;
    }

</style>